import React, { Component, Fragment } from 'react'
import { ReadOutlined, RightOutlined } from '@ant-design/icons'
import './mycategory.less'
import categoryApi from '../../api/category'
import { message } from 'antd'
import { withRouter } from 'react-router-dom'
class MyCategory extends Component {
  state = {
    categoryList: [],
    activeIndex:''
  }
  componentDidMount() {
    this.getList()
  }
  getList = () => {
    categoryApi.list().then(res => {
      if (res.success) {
        this.setState({
          categoryList: res.data.data
        })
      } else {
        return message.error(res.msg)
      }
    }).catch(err => {
      console.log(err);
    })
  }
  clickCategory = (categoryId,categoryTitle) =>{
    return ()=>{
      this.setState({
        activeIndex:categoryId
      })
      this.props.changeCategory({categoryId,categoryTitle})
    }
  }
  render() {
    const { children, title } = this.props
    const { categoryList,activeIndex } = this.state
    return (
      <Fragment>
        {children}
        <div className="category-box">
          <header>
            <div>
              <ReadOutlined style={{ fontSize: '16px' }} />
              <h3>{title}分类</h3>
            </div>
            <span onClick={this.clickCategory("","")}>查看全部</span>
          </header>
          <ul>

            {
              categoryList.map(item => {
                return (
                  <li className={item.id === activeIndex ? 'active': '' } key={item.id} onClick={this.clickCategory(item.id,item.title)}>
                    <span>{item.title}</span>
                    <RightOutlined />
                  </li>
                )
              })
            }
          </ul>
        </div>
      </Fragment>
    )
  }
}
export default withRouter(MyCategory)